<template>
	<view>
		<u-mask :show="videoShow" @click="close">
			<view class="u-flex u-flex-col u-row-center u-height-100 u-width-100">
				<view v-if="videoDomShow">
					<video :src="videoUrl" :autoplay="true"
						:show-play-btn="false" :show-fullscreen-btn="false" :controls="false"></video>
				</view>
				<view class="u-m-t-40" @click="close">
					<slot></slot>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		props:{
			show:{
				type:Boolean,
				default: false
			},
			url:{
				type: String
			}
		},
		watch:{
			show:{
				deep: true,
				handler(newValue){
					this.videoShow = newValue
					if(newValue){
						this.videoDomShow = true
					}
				}
			},
			url:{
				deep: true,
				handler(newValue){
					this.videoUrl = newValue
				}
			}
		},
		data(){
			return{
				videoShow: this.show,
				videoUrl: '',
				videoDomShow: false
			}
		},
		methods:{
			close(){
				this.videoDomShow = false
				this.$emit("close")
			}
		}
	}
</script>

<style scoped>
	video {
		height: 68vh !important;
		width: 95vw !important;
		border-radius: 20rpx;
	}
</style>